<template>
	<view class="phxx-item">
		<view class="phxx-item-content">
			<view class="bottom">
				<view class="items">
					<text class="til">手机号:</text>
					<input class="val" :value="itemList.account" disabled/>
				</view>
				<view class="items">
					<text class="til">验证码:</text>
					<input class="val" v-model="itemList.originalPwd"/>
					<button style="position:absolute;right:27px;z-index: 999;" class="cancelBtn" size="mini" @click="getCode()">{{mess}}</button>
				</view>
				<view class="items">
					<text class="til">新密码:</text>
					<input class="val" v-model="itemList.newPwd"/>
				</view>
				<view class="items">
					<text class="til">确认密码:</text>
					<input class="val" v-model="itemList.againPwd"/>
				</view>
				<view class="btn">
					<button type="primary" @click="handleClick">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { toast } from '@/utils/common';
export default {
	driverName: 'resetPwd',
	props: {
	},
	data() {
		return {
			itemList: {
				account: this.$store.state.user.name,
				originalPwd: undefined,
				newPwd: undefined,
				againPwd: undefined,
			},
			mess: '获取验证码',
			totalSeconds: 60
		};
	},
	methods: {
		getCode(){
			let _this = this
			setInterval(function() {
				if (_this.totalSeconds <= 0) {
					clearInterval(interval);
					countdownEl.innerHTML = '获取验证码';
				}
				_this.totalSeconds -= 1;
				_this.mess = '剩余时间：' + _this.totalSeconds + '秒';
			}, 1000);
		},
		handleClick() {
			if(this.itemList.newPwd !== this.itemList.againPwd){
				toast('新密码必须和确认密码不一致')
				return
			}
			if((this.itemList.originalPwd.length < 4 || this.itemList.originalPwd.length > 16) || (this.itemList.newPwd.length < 4 || this.itemList.newPwd.length > 16)){
				toast('密码长度必须在4到16位之间')
				return
			}
			let data = {
				'oldPassword': String(this.itemList.originalPwd),
				'newPassword': String(this.itemList.newPwd),
			}
			this.$store.dispatch('UpdateUserPwd', data).then((res) => {
				console.log(res,'这是接口返回的结果222');
				if(res.data.code == 0){
					toast('重置密码成功')
					setTimeout(()=>{
						this.$tab.reLaunch('/pages/mine/index');
					},1000)
				}else{
					toast(res.data.msg)
				}
			});
		},
		parseTime(time, pattern) {
			if (arguments.length === 0 || !time) {
				return null;
			}
			const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
			let date;
			if (typeof time === 'object') {
				date = time;
			} else {
				if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
					time = parseInt(time);
				} else if (typeof time === 'string') {
					time = time
						.replace(new RegExp(/-/gm), '/')
						.replace('T', ' ')
						.replace(new RegExp(/\.[\d]{3}/gm), '');
				}
				if (typeof time === 'number' && time.toString().length === 10) {
					time = time * 1000;
				}
				date = new Date(time);
			}
			const formatObj = {
				y: date.getFullYear(),
				m: date.getMonth() + 1,
				d: date.getDate(),
				h: date.getHours(),
				i: date.getMinutes(),
				s: date.getSeconds(),
				a: date.getDay()
			};
			const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
				let value = formatObj[key];
				// Note: getDay() returns 0 on Sunday
				if (key === 'a') {
					return ['日', '一', '二', '三', '四', '五', '六'][value];
				}
				if (result.length > 0 && value < 10) {
					value = '0' + value;
				}
				return value || 0;
			});
			return time_str;
		}
	}
};
</script>

<style lang="scss" scoped>
.phxx-item {
	width: 700rpx;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
	margin: 20rpx auto 20rpx auto;
	border-radius: 20rpx;
	background: #fff;
	font-size: 26.66rpx;
	color: #000;
	.phxx-item-content {
		width: 644rpx;
		.bottom{
			padding: 10rpx 0 0 0;
			> .items{
				padding-bottom: 6rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ccc;
				padding-top: 15px;
			}
			.btn{
				button{
					width: 100%;
					height: 40px!important;
					margin-top: 45px;
					line-height: 40px!important;
				}
			}
			.til {
				width: 20%;
				display: inline-block;
			}
			.val {
				margin-left: 30rpx;
				width: 75%;
				display: inline-block;
				border-radius: 5px;
				height: 30px;
			}
		}
	}
}
</style>
